<template>
	<view class="classList">
		<!-- 下拉刷新 -->
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/previw/previw?id=${item._id}`" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<!-- 上拉加载更多 -->
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'nomore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
// onReachBottom 触底加载更多
import { onLoad, onUnload, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { apiGetClassList, apiGetHistoryList } from '@/api/apis.js'
import { goToHom } from '@/utils/common.js'

const classList = ref([])
const classId = ref('')
const noData = ref(false)
const queryParmise = {
	pageNum:1,
	pageSize:12
}
let classListName = ""

onLoad((e) => {
	let { id=null, name=null, type=null } = e
	if( type ) queryParmise.type = type
	if( id ) queryParmise.classid = id
	// if( !id ) goToHom()
	classListName = name
	uni.setNavigationBarTitle({
		// 修改导航标题
		// 进入具体分类页面 动态更改对应分类的title 
		title:name
	})
	getClassList()　　
})
// 触底加载更多
onReachBottom(()=>{
	if(noData.value) return
	queryParmise.pageNum++;
	getClassList()
})
const getClassList = async() => {
	console.log(queryParmise)
	let res;
	// 有classId说明是从首页或者导航进入的页面
	if( queryParmise.classid ) res = await apiGetClassList(queryParmise)
	// 有type说明是从个人中心进入的页面
	if( queryParmise.type ) res = await apiGetHistoryList(queryParmise)
	
    // 因为有上拉加载更多,所以我们要把每页请求来的数据做一个累加
	classList.value = [...classList.value,...res.data]
	// 用一个noData来进行判断是否下拉刷新进行请求,如果已经没有数据了 我们应该阻止下拉刷新发送请求
	// 判断条件是 我们求请的数量如果大于他返回的数据的数量,说明数据已经到底了
	if(queryParmise.pageSize > res.data.length) noData.value = true
	
	uni.setStorageSync("storageClassList",classList.value) //将classList存入浏览器缓存，命名为storageClassList，去local stroage中找
}
// 分享给好友  aip->第三方服务->分享
onShareAppMessage(()=>{
	return {
		title:`咸虾米壁纸,精选分类-${classListName}`,
		path:`/pages/classList/classList?id=${queryParmise.classid}&name=${classListName}`  //分享到具体分类
	}         
})
// 分享到 微信朋友圈 微信小程序开发平台去看相关api
onShareTimeline(()=>{
	return {
		title:`咸虾米壁纸,精选分类-${classListName}`,  //分享给别人的title
		imageUrl: "/static/images/xxmLogo.png",  
		query:`id=${queryParmise.classid}&name=${classListName}`, //分享微信朋友圈时 不需要带前面的页面路径 ，参数的key值是query
	}
})

onUnload(()=>{
	// 优化项目 页面关闭时 清除缓存
	uni.removeStorageSync("storageClassList")
	
})

 
</script>

<style lang="scss" scoped>
	 .classList {
	 	.content {
			padding: 5rpx;
	 		display: grid;
	 		grid-template-columns: repeat(3,1fr);
			gap: 5rpx;
			.item {
				height: 440rpx;
			    image {
				    width: 100%;
					height: 100%;
					display: block;
			    }	
			}
			
	 	}
	 }      
</style>
